<template>
    <el-drawer v-model="visible" :with-header="false" :size="800" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="详情"></sc-title>
                    <div>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form ref="form" label-width="110px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="机构:">
                                                    {{ info.agent ? info.agent.name : '' }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="金额:">
                                                    <span v-if="info.amount < 0" style="color: rgb(0, 170, 0);">{{ info.amount }}</span>
							                        <span v-else style="color: rgb(255, 170, 0);">{{ info.amount }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="类型:">{{ info.type.name }}</el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="状态:">
                                                    <el-tag size="mini" v-if="info.status.value == 1" type="warning">{{info.status.name}}</el-tag>
                                                    <el-tag size="mini" v-if="info.status.value == 2 && info.type.value == 10" type="success">已打款</el-tag>
                                                    <el-tag size="mini" v-if="info.status.value == 2 && info.type.value != 10" type="success">{{info.status.name}}</el-tag>
                                                    <el-tag size="mini" v-if="info.status.value == 3" type="danger">{{info.status.name}}
                                                        <template v-if="info.status.remark">
                                                            <el-tooltip class="box-item" effect="dark" :content="info.status.remark" placement="top-end">
                                                                <i style="cursor: pointer" class="el-icon-question table-msg" />
                                                            </el-tooltip>
                                                        </template>
                                                    </el-tag>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="交易时间:">{{ info.createdAt }}</el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row  v-if="info?.type?.value == 10">
                                            <el-col :span="12">
                                                <el-form-item label="打款方式:">
                                                    <el-tag size="mini" v-if="info?.account?.type == 1">银行卡</el-tag>
                                                </el-form-item>
												<el-form-item label="开户姓名:">
													{{info?.account?.userName}}
												</el-form-item>
												<el-form-item label="银行卡号:">
													{{info?.account?.code}}
												</el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="开户银行:">
                                                    {{info?.account?.bankFullName}}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24">
                                                <el-form-item label="交易描述:">{{ info.description }}</el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-form>
                            </el-tab-pane>

                            <el-tab-pane v-if="info?.type?.value == 10" label="打款凭证" name="2">
                                <div v-if="info?.paymentCertificate?.length" class="sc-upload-list" style="margin-top: 20px;">
                                    <ul>
                                        <li v-for="(file, index) in info.paymentCertificate" :key="index">
                                            <div class="sc-upload-item">
                                                <el-image class="image" :src="file.url" fit="cover" :preview-src-list="previewPaymentCertificate" hide-on-click-modal append-to-body :z-index="3500">
                                                    <template #placeholder>
                                                        <div class="image-slot">
                                                            <i class="el-icon-more"></i>
                                                        </div>
                                                    </template>
                                                </el-image>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <el-empty v-else description="暂无打款凭证" :image-size="40"></el-empty>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible = false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

</template>

<script>
export default {
    components: {
        
    },
    data() {
        return {
            visible: false,
            loading: false,
            dialog: {
                audit: false
            },
            activeName: 'first',
            info: this.getDefaultRuleForm(),
            previewPaymentCertificate: []
        }
    },
    methods: {
        open(row, active) {
            this.visible = true
            if (active) {
                this.activeName = active
            }
            this.info = row
            if (row.paymentCertificate) {
                row.paymentCertificate.forEach(item => {
                    item.path && this.previewPaymentCertificate.push(item.url)
                })
            }
        },
        handleSuccess() {
            this.visible = false
            this.$emit('success')
        },
        auditWithdraw() {
            this.dialog.audit = true
            this.$nextTick(() => {
                this.$refs.auditDialog.open().setField('id', this.info.id)
            })
        },
        getDefaultRuleForm() {
            return {
                id: null,
                amount: null,
                statusRemarks: '',
                status: {},
                type: {},
                agent: {}
            }
        }
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}

.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

[data-theme="dark"] .info {
    border-color: #434343;
}

:deep(.el-form-item__content) {
    font-size: 12px !important;
}

:deep(.el-image-viewer__close) {
    background-color: unset;
}

.el-form-item__label {
    text-align: justify;
}

.sc-upload-list {
    display: inline-block;
}

.sc-upload-list li {
    list-style: none;
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-right: 10px;
    vertical-align: top;
    box-sizing: border-box;
}</style>
